<template>
  <div class="articlelist_page">
      <List item-layout="vertical">
        <router-link :to="'/article/'+ item._id " v-for="(item,index) in data" :key="index">
            <ListItem>
                <ListItemMeta :avatar="item.avatar" :title="item.contentTitle" :description="'作者:' + item.email" />
                {{ item.desc}}...
                <template slot="action">
                    <li>
                        <Icon type="ios-eye-outline" />{{item.PV}}
                    </li>
                    <li>
                        <Icon type="ios-chatbubbles-outline" />{{item.comment}}
                    </li>
                    <li>
                        <Icon type="ios-calendar-outline" />{{item.created_time?item.created_time.slice(0,10):''}}
                    </li>
                </template>
                <template slot="extra">
                    <img :src="item.cover" style="width: 280px;">
                </template>
            </ListItem>
        </router-link>
    </List>
      <Page :total="total" show-total class="page" :page-size="limit" @on-change='currentPage'/>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
     data () {
            return {
                page:0,
                limit:3,
                total:0,
                data: []
            }
        },
        props:['classify','tag','flag'], //classify不同栏目 tag标签  flag 统计文章数量
        methods:{
            ...mapMutations(['changeTotal']),
            init(){
                this.$axios.get('/api/manage/article/getBy',{params:{page:this.page,limit:this.limit,lanmu:this.classify,tag:this.tag}}).then(res=>{
                    if(res.data.err_code == 1){
                        this.data = res.data.data;
                        this.total = res.data.total
                    }
                    if(res.data.err_code == 0){
                        this.$Message.info('没有查询到文章')
                    }
                    if(this.flag){
                        this.changeTotal({total:res.data.total})
                    }
                  
                })
            },
            currentPage(page){
                this.page = page -1;
                this.init()
            }
        },
        watch:{
            //监听路由变化
            tag(newValue){
                if(newValue){
                    this.$axios.get('/api/manage/article/getBy',{params:{page:this.page,limit:this.limit,lanmu:this.classify,tag:newValue}}).then(res=>{
                    if(res.data.err_code == 1){
                        this.data = res.data.data;
                        this.total = res.data.total
                    }
                    if(res.data.err_code == 0){
                        this.$Message.info('没有查询到文章')
                    }
                    if(this.flag){
                        this.changeTotal({total:res.data.total})
                    }
                  
                })
                }
            }
        },
        mounted(){
            this.init()
        }
}
</script>

<style scoped>
    .articlelist_page{
        margin-top:10px;
    }
   .ivu-list-items .ivu-list-item{
       background-color: #fff;
        padding: 10px;
        margin-top: 10px;
    }
    .page{
        margin-top: 20px;
    }
    a{
        color: #515A6E
    }
</style>